import { Meta } from '@storybook/addon-docs';
import image01 from './assets/estructura_de_interfaz/1.png';
import image02 from './assets/estructura_de_interfaz/2.png';
import image03 from './assets/estructura_de_interfaz/3.png';
import image04 from './assets/estructura_de_interfaz/4.png';
import image05 from './assets/estructura_de_interfaz/5.png';
import image06 from './assets/estructura_de_interfaz/6.png';
import image07 from './assets/estructura_de_interfaz/7.png';
import image08 from './assets/estructura_de_interfaz/8.png';
import image09 from './assets/estructura_de_interfaz/9.png';
import image10 from './assets/estructura_de_interfaz/10.png';
import image11 from './assets/estructura_de_interfaz/11.png';
import image12 from './assets/estructura_de_interfaz/12.png';
import image13 from './assets/estructura_de_interfaz/13.png';
import image14 from './assets/estructura_de_interfaz/14.png';
import image15 from './assets/estructura_de_interfaz/15.png';
import image16 from './assets/estructura_de_interfaz/16.png';
import image17 from './assets/estructura_de_interfaz/17.png';
import image18 from './assets/estructura_de_interfaz/18.png';
import image19 from './assets/estructura_de_interfaz/19.png';
import image20 from './assets/estructura_de_interfaz/20.png';
import image21 from './assets/estructura_de_interfaz/21.png';
import image22 from './assets/estructura_de_interfaz/22.png';
# Estructura de interfaz / UI shell
La estructura del interfaz (UI shell) es la carcasa que envuelve la solución digital. Es un conjunto de componentes compartidos en todo el producto. Es recomendable que la estructura de interfaz sea similar, si no compartida por todas las soluciones de un mismo ecosistema, dado que proporciona un conjunto de patrones de interacción que persisten creando una experiencia más homogénea para el ciudadano.
La estructura de interfaz es la base de la navegación y orientación dentro del interfaz. Esta estructura se compone de distintos elementos:
- Cabecera (header). Es la parte superior de todas las páginas. Contiene elementos de identidad, funciones horizontales y los primeros elementos de navegación.
- Panel derecho (right panel). Es el panel que cohesiona todo el ecosistema. Permite navegar entre las distintas soluciones digitales.
- Panel izquierdo (left panel). Es el panel que permite la navegación detallada dentro de cada solución. Ambos paneles se despliegan típicamente desde la cabecera.
- Pie (footer). Es la parte inferior que cierra todas las páginas. Contiene elementos informacionales genéricos, aspectos legales…
Estos elementos son independientes entre sí pero han sido diseñados y optimizados para que se utilicen juntos.
El papel de la estructura de interfaz va más allá de dar ayuda a navegación o acceso a funciones. Su característica envolvente le convierte en un elemento ideal de referencia para la orientación del usuario, tanto en posición como en estado. Por ejemplo puede indicar en qué zona de la solución se encuentra, o si está autenticado o no y su rol.
## Cabecera (header)
La cabecera es el elemento que se muestra en la parte superior de la ventana de navegación y se extiende a la anchura completa de esta. La cabecera persiste durante toda la experiencia en la solución digital.
El área principal y más destacada es la **identidad** que incluye los logos del Gobierno de España, de el Ministerio de Inclusión, Seguridad Social y Migraciones, y el logo del producto concreto, por ejemplo la Sede Electrónica.
Por debajo de la identidad, la cabecera contiene distintas **áreas y elementos**. La distribución de estos va de izquierda a derecha de los más relacionados con el detalle de la solución a los relativos al ecosistema completo. Es por ello, que de manera general los elementos de la izquierda permiten navegaciones locales y los de la zona derecha navegaciones globales.
Los **iconos de paneles** que permiten abrir y cerrar los paneles derecho e izquierdo, y se sitúan en el extremo derecho e izquierdo respectivamente. Se utilizan los iconos habituales en soluciones digitales para estas funciones, el icono “de hamburguesa” y el icono “de ecosistema”.
La cabecera puede ser utilizada por si misma (standalone) o con uno o ambos paneles laterales, activados por los iconos correspondientes.
Los **enlaces y menús** son parte de los elementos de navegación de la solución. Habitualmente replican los más significativos del panel izquierdo. Puede ser tanto como enlaces directos a páginas de la solución, como submenú que abren una capa de enlaces a páginas.
Si la solución tiene su propio panel izquierdo para la navegación, pueden no ser necesarios estos elementos porque duplican funciones, aunque también es posible destacar la navegación hacia partes significativas de la solución en la barra de la cabecera, repitiendo elementos.
La **barra de utilidades** permiten invocar funcionalidades genéricas como las búsquedas, ayudas, idiomas, autenticación de usuarios… Estas funciones se representan mediante iconos típicos fácilmente reconocibles por el usuario.
| **Utilidad de búsqueda** |
|:-----------------------: |
| 
|
La utilidad de búsqueda abre una capa con el buscador, permitiendo buscar cadenas de texto en toda la solución. Aunque se puede iniciar la búsqueda desde la propia capa, típicamente enlaza con una página de búsqueda y resultados.
| **Utilidad de ayudas** | **Utilidad de** **idiomas** |
| :-----------------------------------------------------------: | :------------------------------------------------------------: |
| 
| 
|
La **utilidad de ayudas** puede bien abrir una página con opciones de ayuda o mostrar una capa con enlaces que permite acceder a funciones como preguntas frecuentes, contacto, quejas y sugerencias, asistente virtual…
La **utilidad de idiomas** permite elegir el idioma en que se presenta el interfáz. El propio icono de esta utilidad indica el idioma activo en cada momento.
| **Utilidad de usuario** (usuario sin autenticar) | **Utilidad de usuario** (usuario autenticado) |
| :------------------------------------------------------------: | :------------------------------------------------------------: |
| 
| 
|
La **utilidad de usuario o de autenticación** se debe configurar dependiendo de las capacidades de identificación de la solución. Típicamente se muestra con un icono de usuario cuando este no está autenticado, o con ese logo y el nombre del usuario cuando sí lo está. Esta utilidad puede o bien mostrar un submenú con opciones relacionadas con el usuario como autenticar, desconectar, cambiar contraseña, ver datos personales… o bien enlazar con una página de gestión de usuario donde se pueden hacer estas y más funciones.
Hay muchas otras utilidades posibles como notificaciones, cuadros de mandos, fecha y hora… No todas las utilidades tienen sentido para todas las soluciones, pero se recomienda que aquellas que compartan funciones utilicen los mismos iconos. Asimismo, se recomienda también que se respete el orden de los mismos.
En cuanto a la **anatomía** de la cabecera, se respetan los parámetros de espaciado definidos en el lenguaje de **Grafito**.
Todos los elementos de la cabecera son **clicables** y provocan **acciones**, desde abrir o cerrar paneles, volver a la página principal, navegar a páginas determinadas, ejecutar funciones de utilidades… No solo elemento descriptivo (icono, texto…) permite la interacción sino toda la zona de la barra donde se situa dicho elemento.
En cuanto a los **estados** de los elementos que configuran la cabecera, estos coinciden con los definidos para los componentes individuales.
En cuanto a otros **comportamientos** del header, este es un objeto flexible que se adapta al ancho de la pantalla. Los elementos se mantienen alineados al lado derecho o izquierdo según su posición.
A medida que el header va reduciendo su tamaño para adaptarse a tamaños de pantalla menores, los enlaces y submenús se integran en el panel izquierdo al que se accede mediante el icono de hamburguesa.
## Panel izquierdo o de navegación local
El panel de navegación local muestra el menú de navegación dentro de la solución digital. Es un panel opcional puesto a que esa navegación puede ser también realizada desde el elemento de enlaces y menús de la cabecera.
Este elemento es especialmente útil cuando la solución digital tiene una **arquitectura de información** compleja con múltiples menús para la organización de la información, profundidad de estructura… Este elemento permite crear jerarquías y desplegar opciones verticalmente sin interferir con el contenido de la página.
En las navegaciones más simples se puede prescindir de este panel y limitarse a la navegación desde la cabecera. En casos más complejos se puede utilizar la navegación cruzada combinando este panel de navegación junto con los elementos de navegación de la cabecera.
Cuando se utiliza, el panel izquierdo puede estar permanentemente **abierto** o **cerrado** en reposo y abrirse medante el icono de la hamburguesa. Se recomienda esta segunda opción puesto que deja más espacio para el panel de contenido y además no satura al usuario con un exceso de información.
El panel, una vez abierto, se mantiene anclado al icono. Si se permite el cierre del panel, esto se realiza mediante el mismo icono que se convierte en un icono de «x» para permitir el cierre del mismo.
También puede optarse por una solución combinada donde el menú este habitualmente cerrado, pero manteniendose abierto en una cierta profundidad de navegación para facilitar la orientación del usuario.
Este elemento suele estar en combinación con el **rastro de migas** (breadcrum) que identifica el recorrido a lo largo del menú de navegación y permite ascender hacia opciones superiores sin necesidad de utilizar el menú completo.
La **organización** de los elementos dentro del panel depende de cada solución concreta y siempre adaptada a la arquitectura de información definida. Hay soluciones que organizan sus elementos por orden cronológico o alfabético, otras siguen criterios más funcionales como por estructura, otras por criterios de negocio como audiencias o por estructura organizativa… En cualquier caso, se requiere un análisis específico de la estructura de la solución para definir la navegación de la misma.
El panel se compone de **enlaces y menús desplegables** que contienen enlaces, así como de separadores que permiten la estructuración de los mismos. Este panel hereda también los enlaces y menús desplegables de la cabecera cuando esta se estrecha y no hay espacio para mostrarlos. En este caso, estos elementos deben posicionarse en la parte superior del panel.
En cuanto a su **anatomía** se cumplen las mismas reglas de espaciado que con el resto de elementos de la estructura de interfaz.
En cuanto a los **estados**, sus elementos replican los estados de los componentes en que se basan
## Panel derecho o de navegación global
El panel de navegación global muestra el menú de navegación dentro del ecosistema completo de la Seguridad Social. Permite al usuario comprender de manera global a la seguridad social y abrir cualquiera de las soluciones ofrecidas.
Aunque es un panel opcional, se recomienda que se utilice puesto que este panel mantiene la conexión entre todas las soluciones que ofrece la Seguridad Social y permite al usuario entender qué soluciones están disponibles y así encontrar más fácilmente aquella que da respuesta a sus necesidades concretas.
Este elemento se presenta habitualmente **cerrado** y se abre mediante el icono de ecosistema de la cabecera. El panel se mantiene anclado al icono que se convierte en un icono de «x» para permitir el cierre del mismo.
La **organización** de los elementos dentro del panel debe ser uniforme para todo el ecosistema. Se recomienda que se organicen sus elementos por orden de prioridad para el usuario y agrupados de manera lógica para este. En un primer grupo las soluciones más generales de toda la Seguridad Social, el portal internet y la sede. En uno segundo las soluciones generales de las distintas entidades, TuSS, ImportaSS… En otros más adelante soluciones específicas, soluciones complementarias… En cualquier caso, se requiere un análisis específico del ecosistema para definir los elementos y su organización.
El panel se compone de **enlaces**, así como de **separadores** que permiten la estructuración de los mismos.
En cuanto a su **anatomía** se cumplen las mismas reglas de espaciado que con el resto de elementos de la estructura de interfaz.
En cuanto a los **estados**, sus elementos replican los estados de los componentes en que se basan
## Pie de página
El pie de página es un elemento de estructura que sirve para cerrar las páginas. No solo sirve para indicar al usuario que la página ha terminado sino que además incluye información de interés.
Al igual que la cabecera, el pie es un elemento flexible que se adapta al ancho de la ventana. Se compone de una serie de enlaces a los recursos informacionales de utilidad.
El pie tiene dos niveles, uno **funcional** y otro **técnico**. El nivel funcional incluye información básica de la funcionalidad general del sitio, como por ejemplo certificados electrónicos, carta de servicios, normativa y legislación, fecha y hora oficial, servicios de verificación, requisitos técnicos. El nivel técnico incluye información técnica como accesibilidad, mapa web, RSS, copyright, aviso legal y política de cookies.
En cuanto a su **anatomía** se cumplen las mismas reglas de espaciado que con el resto de elementos de la estructura de interfaz.
